<!-- 游戏-->

<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="游戏推荐" width="600px"
      @close="emits('closeDialog')">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" :label-width="formLabelWidth">
        
        <el-form-item label="标题" prop="title">
          <el-input v-model="dialogForm.title" />
        </el-form-item>
        <el-form-item label="游戏记录ID" prop="game_id">
          <el-input v-model="dialogForm.game_id" placeholder="多个游戏ID用英文逗号,分割" />
        </el-form-item>
        <el-form-item label="APP每行显示个数" prop="show_number">
          <el-input v-model="dialogForm.show_number" type="number" />
        </el-form-item>
        <el-form-item label="排序" prop="rank">
          <el-input v-model="dialogForm.rank" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否隐藏" prop="is_hide">
            <el-select v-model="dialogForm.is_hide" placeholder="是否隐藏">
                <el-option label="否" :value="0" />
                <el-option label="是" :value="1" />
            </el-select>
        </el-form-item>
        <el-form-item label="id" style="display: none">
          <el-input v-model="dialogForm.id" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="emits('cancel')">取消</el-button>
          <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script setup>
  import { ref } from "vue";
  const dialogFormRef = ref(null);
  
  defineProps({
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    gameCategoryList: {
      type: Array,
      default: []
    },
    dialogForm: {
      type: Object,
      default: {
        id: "",
        title: "",
        show_number: "",
        game_id: "",
        rank: "",
        is_hide: "",
      }
    },
    btnLoading: {
      type: Boolean,
      default: false
    }
  });
  const emits = defineEmits([
    "closeDialog",
    "cancel",
    "submitForm",
  ]);
  
  const formLabelWidth = "150px";
  // 校验
  const rules = {
    game_id: [{ required: true, message: "请输入游戏记录ID，多个用,分割", trigger: "blur" }],
    show_number:[{required:true, message:"请输入每行显示个数", trigger:"blue"}],
  };
  
  // 提交
  const submit = dialogForm => {
    dialogFormRef.value
      .validate()
      .then(async () => {
        try {
          emits("submitForm", dialogForm);
        } catch (error) {
          console.log(error);
        }
      })
      .catch(error => {
        console.log(error);
      });
  };
  </script>
  